import { AppBar, Box, Container, CssBaseline, Toolbar, Typography, Chip } from '@mui/material';
import { Link } from "react-router-dom";
import ThemeToggle from '../components/ThemeToggle';
import FloatingMessageBoard from '../components/FloatingMessageBoard';
import { ThemeProvider } from '../contexts/ThemeContext';
import ConstructionIcon from '@mui/icons-material/Construction';
import FavoriteIcon from '@mui/icons-material/Favorite';

const MainLayout = ({ children }: { children: React.ReactNode }) => {
    return (
        <ThemeProvider>
            <CssBaseline />
            <Box sx={{ 
                display: 'flex', 
                flexDirection: 'column', 
                minHeight: '100vh',
                background: 'linear-gradient(135deg, rgba(25,118,210,0.02) 0%, rgba(156,39,176,0.02) 100%)'
            }}>
                <AppBar 
                    position="static" 
                    sx={{ 
                        background: 'linear-gradient(135deg, #1976d2 0%, #42a5f5 100%)',
                        boxShadow: '0 4px 20px rgba(25,118,210,0.2)',
                        borderBottom: '1px solid rgba(255,255,255,0.1)'
                    }}
                >
                    <Toolbar sx={{ 
                        justifyContent: 'space-between',
                        px: { xs: 2, md: 3 },
                        py: 1
                    }}>
                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
                            <Box
                                sx={{
                                    position: 'relative',
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                    '&::before': {
                                        content: '""',
                                        position: 'absolute',
                                        width: '120%',
                                        height: '120%',
                                        borderRadius: '50%',
                                        background: 'radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%)',
                                        animation: 'pulse 2s ease-in-out infinite',
                                    },
                                    '@keyframes pulse': {
                                        '0%, 100%': {
                                            transform: 'scale(1)',
                                            opacity: 0.8
                                        },
                                        '50%': {
                                            transform: 'scale(1.1)',
                                            opacity: 0.4
                                        }
                                    }
                                }}
                            >
                                <ConstructionIcon 
                                    sx={{ 
                                        color: '#fff', 
                                        fontSize: 32,
                                        position: 'relative',
                                        zIndex: 2,
                                        filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.3))',
                                        transition: 'all 0.3s ease',
                                        '&:hover': {
                                            transform: 'rotate(15deg) scale(1.1)'
                                        }
                                    }} 
                                />
                            </Box>
                            <Typography 
                                variant="h6" 
                                component={Link} 
                                to={"/"} 
                                sx={{ 
                                    color: 'inherit', 
                                    textDecoration: 'none',
                                    fontWeight: 700,
                                    fontSize: { xs: '1.1rem', sm: '1.25rem' },
                                    textShadow: '0 1px 2px rgba(0,0,0,0.1)',
                                    transition: 'all 0.3s ease',
                                    '&:hover': {
                                        transform: 'scale(1.02)',
                                        textShadow: '0 2px 4px rgba(0,0,0,0.2)'
                                    }
                                }}
                            >
                                VV在线工具
                            </Typography>
                            <Chip 
                                label="Beta" 
                                size="small" 
                                sx={{ 
                                    ml: 1,
                                    bgcolor: 'rgba(255,255,255,0.2)',
                                    color: '#fff',
                                    fontSize: '0.7rem',
                                    height: 20,
                                    '& .MuiChip-label': {
                                        px: 1
                                    }
                                }} 
                            />
                        </Box>
                        <ThemeToggle />
                    </Toolbar>
                </AppBar>
                
                <Container 
                    component="main" 
                    maxWidth="xl"
                    sx={{ 
                        mt: { xs: 2, md: 4 }, 
                        mb: { xs: 2, md: 4 }, 
                        flexGrow: 1,
                        px: { xs: 2, sm: 3, md: 4 }
                    }}
                >
                    {children}
                </Container>
                
                <Box 
                    component="footer" 
                    sx={{ 
                        py: 4,
                        background: 'linear-gradient(135deg, rgba(25,118,210,0.05) 0%, rgba(156,39,176,0.05) 100%)',
                        borderTop: '1px solid',
                        borderColor: 'divider',
                        backdropFilter: 'blur(10px)',
                        mt: 'auto'
                    }}
                >
                    <Container maxWidth="lg">
                        <Box sx={{ 
                            display: 'flex', 
                            flexDirection: { xs: 'column', sm: 'row' },
                            justifyContent: 'space-between',
                            alignItems: 'center',
                            gap: 2
                        }}>
                            <Typography 
                                variant="body2" 
                                color="text.secondary" 
                                sx={{ 
                                    display: 'flex',
                                    alignItems: 'center',
                                    gap: 1,
                                    fontSize: '0.875rem'
                                }}
                            >
                                © {new Date().getFullYear()} VV在线工具
                                <FavoriteIcon 
                                    sx={{ 
                                        fontSize: 16, 
                                        color: '#ff4569',
                                        animation: 'heartbeat 2s ease-in-out infinite',
                                        filter: 'drop-shadow(0 0 4px rgba(255,69,105,0.6))',
                                        '@keyframes heartbeat': {
                                            '0%, 100%': {
                                                transform: 'scale(1)'
                                            },
                                            '25%': {
                                                transform: 'scale(1.1)'
                                            },
                                            '50%': {
                                                transform: 'scale(1)'
                                            },
                                            '75%': {
                                                transform: 'scale(1.05)'
                                            }
                                        }
                                    }} 
                                />
                                免费提供实用工具服务
                            </Typography>
                            <Typography 
                                variant="caption" 
                                color="text.secondary"
                                sx={{ 
                                    opacity: 0.7,
                                    fontSize: '0.75rem'
                                }}
                            >
                                让工作更高效，让生活更便捷
                            </Typography>
                        </Box>
                    </Container>
                </Box>
                
                {/* 悬浮留言板 */}
                <FloatingMessageBoard />
            </Box>
        </ThemeProvider>
    );
};

export default MainLayout;